<template>
  <div class="tree-container">
    <div :class="['middle', first ? 'middle1' : '']">
      <el-tree :accordion="false" :data="dataTree" node-key="regionCode" :props="defaultProps"
        @node-click="handleNodeClick">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <div><i class="iconfont gfjianzhuwu"></i>{{ node.label }}</div>
        </div>
      </el-tree>
    </div>
    <div class="footer">
    </div>
  </div>
</template>

<script>
import { reqOrgList, reqSpaceManager } from "@api/api.js";
import { mapState } from "vuex";

export default {
  components: {},
  props: [],
  mixins: [],
  data() {
    return {
      isTree: true,
      dataTree: [],
      page: 1,
      limit: 99,
      total: 0,
      orgName: "",
      defaultProps: {
        children: "children",
        label: "name",
        isLeaf: "hasChildren",
        id: "id",
      },
      first: true, //第一次加载，点击后消除
      loadingSearch: false,
      checkkey: 0, //选中的key
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    // this.getDataList();
  },
  methods: {
    //初始化
    clearinit() {
      this.dataTree = []
      this.total = 0
    },
    // 建筑物
    async getBuildings(orgId) {
      let params = {
        userId: this.user.userId,
        roleName: this.user.roleName,
        metaCode: 1,
        orgId: orgId,
        isStatistics: 0,
      };
      let res = await reqSpaceManager(1, 999, params);
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataTree = res.data.rows;
      this.total = res.data.total;
      this.first = true; //true会默认选中第一个
      if (this.dataTree.length > 0) {
        let params = {
          spaceId: this.dataTree[0].id,
        };
        this.$emit("toggleOrgId", params);
      } else {
        let params = {
          spaceId: '',
        };
        this.$emit("toggleOrgId", params);
      }
    },
    // 点击一条
    handleNodeClick(data, checked) {
      //   console.log(data);
      this.checkkey = data.id; // 存储选中的key
      let params = {
        spaceId: data.id,
      };
      this.$emit("toggleOrgId", params);
      this.first = false;
    },
    // async loadNode(node, resolve) {
    //   //   console.log(node);
    //   if (node.level === 1) {
    //     let data = [];
    //     let params = {
    //       userId: this.user.userId,
    //       roleName: this.user.roleName,
    //       metaCode: 1,
    //       orgId: node.data.id,
    //       isStatistics: 0,
    //       // name:this.orgName
    //     };
    //     let res = await reqSpaceManager(1, 999, params);
    //     // console.log(res);
    //     res.data.rows.forEach((item) => {
    //       data.push({
    //         orgName: item.name,
    //         id: item.id,
    //         orgId: item.orgId,
    //         hasChildren: true, //无子级
    //       });
    //     });
    //     return resolve(data);
    //   } else {
    //     return resolve([]);
    //   }
    // },

    // 获取列表
    // async getDataList() {
    //   let params = {
    //     tenantId: this.user.tenantId,
    //     userId: this.user.userId,
    //     roleName: this.user.roleName,
    //     orgName: this.orgName,
    //   };
    //   let res = await reqOrgList(this.page, this.limit, params);
    // //   console.log(res);
    //   if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
    //   this.dataTree = res.data.rows;
    //   this.total = res.data.total;
    //   this.first = false; //true会默认选中第一个
    // },
  },
};
</script>

<style scoped lang="less">
.tree-container {
  width: 100%;
  height: 100%;

  .header {
    position: relative;
    height: 65px;
    padding: 0 10px;
    border-bottom: 1px solid @primaryBorderColor;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      width: 25%;
      font-size: 20px;
      color: @primaryThemeTxtColor;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .right {
      width: 75%;
    }
  }

  .middle {
    //   height: calc(100% - 65px - 70px);
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;
    padding: 10px 0;
    box-sizing: border-box;

    .custom-tree-node {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding-left: 0.5%;
      box-sizing: border-box;
      >div:first-of-type{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        i{
          font-size: 16px;
          margin-right: 5px;
        }
      }

      .tree-node_ctrls {
        position: absolute;
        right: 0;
        width: 30%;
        text-align: right;
        padding-right: 10px;
        // background-color: pink;

        i {
          color: #aaa;
          font-size: 20px;
          margin-right: 10px;

          &:hover {
            color: #fff;
          }
        }
      }
    }

    ::v-deep .el-tree {
      height: 100%;
      font-size: 14px;
      background: @primaryHeaderBgcolor;
      box-sizing: border-box;
      padding: 0 10px;
      color: @primaryThemeTxtColor;
      overflow: hidden;
      overflow-y: scroll;
    }

    ::v-deep .el-tree-node__content {
      padding: 5px 10px !important;

      &:hover {
        background: @paginationBgcolor !important;
        border-radius: 4px;
      }
    }

    ::v-deep .el-tree-node.is-current.is-focusable>.el-tree-node__content {
      background-color: #7367f0 !important;
      border-radius: 4px;
    }

    // 解决点击白底问题
    ::v-deep .el-tree-node.is-focusable>.el-tree-node__content {
      // background-color: @primaryTree;
      border-radius: 4px;
    }

    ::v-deep .is-current>.el-tree-node__content>.el-tree-node__label {
      color: #f0f0f0;
    }
  }

  .middle1 {

    // 解决点击白底问题
    ::v-deep .el-tree>.el-tree-node:first-of-type>.el-tree-node__content {
      background-color: #7367f0 !important;
      color: #f0f0f0;
    }
  }
}

// input后面的查询按钮
::v-deep .el-input-group__append {
  color: #fff;
  border: none;
  background-color: #7367f0;
}

//   父节点白色背景问题
::v-deep .el-tree-node:focus>.el-tree-node__content {
  background-color: transparent !important;
}

::v-deep .el-tree-node__expand-icon.is-leaf {
  display: none;
}
</style>
